<template>
	<view class="collect">
		<view class="collect_box public_sty" v-for="(item,index) in collectlist" :key="index">
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="options" @click="btnClick">
					<view class="collect_shop">
						<view class="collect_img">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="">
							<view class="collect_shop_name">
								<text>{{item.text}}</text>
							</view>
							<view class="collect_shop_spec">
								<text>{{item.shopSpec}}</text>
							</view>
							<view class="collect_shop_pic">
								<text class="collect_shop_pic_icon">￥</text>
								<text class="collect_shop_nowpic">{{item.xianj}}</text>
								<uni-tag :text="item.yuanj" type="default" inverted="true" disabled="true">￥</uni-tag>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				options:[
					{
						text:'取消收藏',
						style:{
							backgroundColor:'#00B359'
						}
					}
				],
				collectlist: [
					{
						id: 0,
						image: '/static/uni.png',
						text: '澳佳宝Blackmores 深海鱼油软胶囊 无腥味 1000mg Omega-3',
						shopSpec: '药品规格',
						yuanj: 38.9,
						xianj: 30.9
					},
					{
						id: 1,
						image: '/static/uni.png',
						text: '澳佳宝Blackmores 深海鱼油软胶囊 无腥味 1000mg Omega-3',
						shopSpec: '药品规格',
						yuanj: 38.9,
						xianj: 30.9
					},
					{
						id: 2,
						image: '/static/uni.png',
						text: '澳佳宝Blackmores 深海鱼油软胶囊 无腥味 1000mg Omega-3',
						shopSpec: '药品规格',
						yuanj: 38.9,
						xianj: 30.9
					},
					{
						id: 3,
						image: '/static/uni.png',
						text: '澳佳宝Blackmores 深海鱼油软胶囊 无腥味 1000mg Omega-3',
						shopSpec: '药品规格',
						yuanj: 38.9,
						xianj: 30.9
					}
				]
			}
		},
		methods:{
			btnClick(){
				console.log("1111")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collect{
		padding: 30rpx;
		.collect_box{
			// border: 1px solid;
			overflow: hidden;
			margin-bottom: 24rpx;
			/deep/ .uni-swipe_button-group{
				width: 100rpx;
				border-radius: 20rpx;
				
			}
			/deep/ .uni-swipe_button{
				display: block;
				padding: 0rpx 20rpx;
				padding-top: 75rpx;
			}
			.collect_shop {
				padding: 15px;
				background-color: #FFFFFF;
				
				border-radius: 20rpx;
				display: flex;
				.collect_img {
					margin-right: 20rpx;
					image {
						width: 160rpx;
						height: 160rpx;
					}
				}
				.collect_shop_name{
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					font-weight: 500;
				}
				.collect_shop_spec{
					font-size: 22rpx;
					color: #999999;
					line-height: 40rpx;
					font-weight: 500;
				}
				.collect_shop_pic{
					.collect_shop_pic_icon{
						color: #FF5F42;
						font-size: 26rpx;
						font-weight: 500;
						line-height: 48rpx;
					}
					.collect_shop_nowpic{
						color: #FF5F42;
						font-size: 36rpx;
						font-weight: 500;
						line-height: 48rpx;
						margin-right: 10rpx;
					}
					/deep/ .uni-tag{
						border: 1px solid;
						padding: 0px !important;
						line-height: 0px !important;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>
